<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <el-row>
        <el-col>
          <el-form-item label="允许跨级抢单" prop="statusBeyond">
            <div class="flex-align-center">
              <el-switch v-model="form.statusBeyond" :active-value="'Y'" :inactive-value="'N'"></el-switch>
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgr5">开启后符合等级的</span>
                <el-link type="primary" :underline="false">[高等级可以抢低等级]</el-link>
                <span class="mgl5">店员的订单</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="同时接单限制" prop="maxOrderNum">
            <div class="flex-align-center">
              <el-input-number v-model="form.maxOrderNum" placeholder="请输入同时接单限制" :min="0" :max="100000" />
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <el-link type="primary" :underline="false">[单位：单]</el-link>
                <span class="mgl5">限制同时接单数量，当超过设置时，会提醒客户和店员不能接单</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="是否开启排除下单" prop="statusExcludeOrder">
            <div class="flex-align-center">
              <el-switch v-model="form.statusExcludeOrder" :active-value="'Y'" :inactive-value="'N'"></el-switch>
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgr5">开启该功能后盲盒下单页会显示排除下单用户勾选后过滤已服务过的店员</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="开启退款原路退回" prop="statusRefund">
            <div class="flex-align-center">
              <el-switch v-model="form.statusRefund" :active-value="'Y'" :inactive-value="'N'"></el-switch>
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <el-link type="primary" :underline="false">[谨慎开启，必须设置前端网页域名，否则订单异常]</el-link>
                <span class="mgl5">开启后当订单使用微信/支付宝付款取消订单退款时金额原路返回而不返回至“我的钱包”</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="border-bottom mgb15"></div>
      <el-row>
        <el-col>
          <el-form-item label="订单超时提醒" prop="statusOvertimeNotice">
            <div class="flex-align-center">
              <el-input-number v-model="form.statusOvertimeNotice" placeholder="请输入订单超时多少分钟提醒" :min="0" :max="100000" />
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <el-link type="primary" :underline="false">[单位：分钟]</el-link>
                <span class="mgl5">未接单时再次提醒店员</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="订单超时取消" prop="statusOvertimeCancel">
            <div class="flex-align-center">
              <el-input-number v-model="form.statusOvertimeCancel" placeholder="请输入订单超时多少分钟取消" :min="0" :max="100000" />
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <el-link type="primary" :underline="false">[单位：分钟]</el-link>
                <span class="mgl5">未接单时自动取消订单</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="border-bottom mgb15"></div>
      <el-row>
        <el-col>
          <el-form-item label="开启夜间订单" prop="statusNightOrder">
            <div class="flex-align-center">
              <el-switch v-model="form.statusNightOrder" :active-value="'Y'" :inactive-value="'N'"></el-switch>
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgl5">开启后夜间时段内的价格等于夜间订单价格倍数乘以白天价格</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="夜间开始时间" prop="nightOrderStart">
            <div class="flex-align-center">
              <el-time-select placeholder="夜间开始时间" v-model="form.nightOrderStart" :picker-options="{ start: '00:00', step: '00:30', end: '24:00' }"></el-time-select>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="夜间结束时间" prop="nightOrderEnd">
            <div class="flex-align-center">
              <el-time-select placeholder="夜间结束时间" v-model="form.nightOrderEnd" :picker-options="{ start: '00:00', step: '00:30', end: '24:00'}"></el-time-select>
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgl5">举例说明： 夜间开始时间为18:00，夜间结束时间为09:00，夜间订单时间有效区间为晚上18点到第二天早上9点</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="夜间订单价格倍数" prop="nightOrderRate">
            <div class="flex-align-center">
              <el-input-number v-model="form.nightOrderRate" placeholder="夜间订单价格倍数" :min="1" :max="1000" />
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgl5">（开启间订单后服务收费将乘以当前倍数）</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="border-bottom mgb15"></div>
      <el-row>
        <el-col>
          <el-form-item label="开启节日订单" prop="statusFestivalOrder">
            <div class="flex-align-center">
              <el-switch v-model="form.statusFestivalOrder" :active-value="'Y'" :inactive-value="'N'"></el-switch>
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgl5">开启后节日时段内的价格等于节日订单价格倍数乘以白天价格（如果同时开启了夜间订单，会与夜间订单的价格倍数叠加相乘）</span>
              </div>
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <el-link type="primary" :underline="false" @click="open = true">[国家法定节日详情]</el-link>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="节日订单价格倍数" prop="festivalOrderRate">
            <div class="flex-align-center">
              <el-input-number v-model="form.festivalOrderRate" placeholder="节日订单价格倍数" :min="1" :max="1000" />
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgl5">（开启间订单后服务收费将乘以当前倍数）</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="reset">重 置</el-button>
    </div>

    <!-- 对话框 -->
    <el-dialog title="节日详情" :visible.sync="open" width="800px" :close-on-click-modal="false" append-to-body>
      <el-table :data="dict.type.app_festival_list">
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column label="节日" prop="raw.dictLabel" min-width="120" />
        <el-table-column label="放假时间" prop="raw.dictData" min-width="100" />
        <el-table-column label="备注" prop="raw.remark" min-width="100" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>

import { getConfigOrder, saveConfigOrder } from "@/api/market/configOrder";
const validateAcquaintance = (rule, value, callback) => {
  if (value < 0 || value > 100) {
    callback(new Error('数字在在 0 至 100之间'))
  } else {
    callback()
  }
}
export default {
  name: 'ConfigOrder',
  dicts: ['app_festival_list'],
  components: {

  },
  data() {
    return {
      open: false,
      // 表单参数
      form: {
        shopId: "",
        statusBeyond: undefined,
        maxOrderNum: undefined,
        statusExcludeOrder: undefined,
        statusRefund: undefined,
        statusOvertimeCancel: undefined,
        statusOvertimeNotice: undefined,
        statusNightOrder: undefined,
        nightOrderStart: undefined,
        nightOrderEnd: undefined,
        nightOrderRate: 1,  
        statusFestivalOrder: undefined,
        festivalOrderRate: 1,  
      },
      // 表单校验
      rules: {
        firstOrderCommissionRate: [
          { required: true, trigger: "blur", message: "请输入续单提成比例(%)" },
          { validator: validateAcquaintance, trigger: 'blur' }
        ],
      }
    }
  },
  mounted(){
    this.init()
  },
  methods: {
    init(){
      let shopId = '';
      if(process.env.NODE_ENV === 'development'){
        shopId = 'haidiyao'
      }else{
        shopId = window.location.hostname.split(".")[0];
      }
      getConfigOrder({shopId: shopId}).then(response => {
        let p = {...this.form}
        this.form = {...p, ...response.data}
      });
    },
    // 表单重置
    reset() {
      this.form = {
        shopId: "",
        statusBeyond: "",
        maxOrderNum: "",
        statusExcludeOrder: "",
        statusRefund: "",
        statusOvertimeCancel: "",
        statusOvertimeNotice: "",
        statusNightOrder: "",
        nightOrderStart: "",
        nightOrderEnd: "",
        nightOrderRate: 1,  
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.form))
          if(process.env.NODE_ENV === 'development'){
            params.shopId = 'haidiyao'
          }else{
            params.shopId = window.location.hostname.split(".")[0];
          }
          saveConfigOrder(params).then(response => {
              this.$modal.msgSuccess("保存成功");
              this.open = false;
              this.getList();
            });
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.width100{
  width: 100px;
}
.width300{
  width: 300px;
}
</style>
